<template>
  <view class="group-item" @click="accessCircle()">
    <view class="group-item-left">
      <head-image :name="circle.name" :url="circle.headImageThumb" :size="90"></head-image>
      <view class="group-name">
        <view>{{ circle.name }}</view>
      </view>
    </view>
    <view class="group-item-right">
      <uni-badge v-if="todayAdd > 0" style="vertical-align: bottom;" :text="text"/>
    </view>
  </view>
</template>

<script>
export default {
  name: "circle-item",
  data() {
    return {
      text: '今日 + ' + this.todayAdd
    }
  },
  methods: {
    accessCircle() {
      this.circleStore.openCircle(this.circle)
      uni.navigateTo({
        url: `/pages/moment/moment?circleId=${this.circle.id}&circleName=${this.circle.name}`
      })
    },
  },
  props: {
    circle: {
      type: Object
    },
    todayAdd: {
      type: Number,
    }
  },
}
</script>

<style scope lang="scss">
.group-item {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
  padding-left: 20rpx;

  .group-item-left {
    height: 100rpx;
    display: flex;
    margin-bottom: 1rpx;
    position: relative;
    align-items: center;
    white-space: nowrap;
  }

  .group-item-right {
    color: #F76260;
    position: relative;
  }

  &:hover {
    background-color: #eeeeee;
  }

  .group-name {
    font-size: 28rpx;
    padding-left: 20rpx;
    text-align: left;
    white-space: nowrap;
    color: #3b4144;
    overflow: hidden;
  }
}
</style>
